<script setup>
import { computed } from "vue";
import { RouterView } from "vue-router";
import { usePreferenceStore } from "../stores/preference";
import { NGrid, NGridItem, NSpace, NDivider } from "naive-ui";
import { NConfigProvider, darkTheme, lightTheme } from "naive-ui";
import UserCard from "./components/sideComps/ButtonsCard.vue";
import SideMenu from "./components/sideComps/SideMenu.vue";
import ContentHeader from "./components/contentComps/ContentHeader.vue";

const pref = usePreferenceStore()

const themeToShow = computed(() => {
	return pref.isDarkTheme ? darkTheme : lightTheme
})
</script>

<template>
	<NConfigProvider :theme="themeToShow">
		<NGrid x-gap="12" :cols="4" item-responsive>
			<NGridItem span="1">
				<NSpace vertical>
					<UserCard />
					<SideMenu />
				</NSpace>
			</NGridItem>
			<NGridItem span="3">
				<NSpace vertical>
					<ContentHeader />
					<NDivider>
					</NDivider>
					<RouterView></RouterView>
				</NSpace>
			</NGridItem>
		</NGrid>
	</NConfigProvider>
</template>

<style scoped></style>